import Vue from 'vue'
import ElementUI, { MessageBox } from 'element-ui'
import VueClipboard from 'vue-clipboard2'
import App from './App.vue'
import router from './router'
import store from './store'
import './style/theme/index.scss'
import './style/main.scss'
import uDialog from './components/Dialog'
import drawer from './components/drawer'
import './directives/drag.js'
Vue.use(ElementUI, { size: 'small' })
Vue.use(VueClipboard)

Vue.config.productionTip = false

// 表单提交
Vue.prototype.$submit = (obj, form, callback) => {
  let formDom = obj.$refs[form]
  formDom.validate(valid => {
    if (valid) {
      callback()
    } else {
      let errors = formDom.fields
      for (let error of errors) {
        if (error.validateState == 'error') {
          obj.$message.warning({
            message: error.validateMessage,
            duration: 2000
          })
          break
        }
      }
    }
  })
}

Vue.prototype.$confirm = (content, onOk) => {
  MessageBox.confirm(content, {
    title: '提示',
    type: 'warning',
    callback: act => {
      if (act == 'confirm') {
        onOk()
      }
    }
  })
}

// 权限判断 v-auth:key
// Vue.directive('auth', {
//   // 当被绑定的元素插入到 DOM 中时……
//   inserted: function(el, binding) {
//     // 判断页面权限
//     if (store.state.admin.id > 1) {
//       let auth = store.state.auth
//       !auth[binding.arg] && el.parentNode.removeChild(el)
//     }
//   }
// })
// 图片预览指令
Vue.directive('preview', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function(el, binding) {
    el.addEventListener('click', () => {
      Vue.prototype.$preview(el.getAttribute('src'))
    })
  }
})

Vue.prototype.$preview = src => {
  Vue.prototype.$msgbox({
    customClass: 'img-preview-box',
    dangerouslyUseHTMLString: true,
    message: `<img src='${src}' alt=""/>`,
    showConfirmButton: false,
    callback: () => {}
  })
}
//弹窗
Vue.prototype.$uDialog = uDialog
//抽屉式弹窗
Vue.prototype.$drawer = drawer

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
